<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            border: 1px solid palevioletred;
            width: 360px;
            height: 70px;
            padding-top: 360px;
            margin: 5px auto;
            background: url("3.jpg") ,no-repeat ;


        }
        ul{
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div id="box">
    <ul>
        <li ><img src="1.jpg" alt=""></li>
        <li ><img src="2.jpg" alt=""></li>
        <li ><img src="3.jpg" alt=""></li>
        <li ><img src="4.jpg" alt=""></li>

    </ul>
</div>

<script>
    window.onload = function () {
        //获取标签
        var  box = document.getElementById("box");
        var allLi = document.getElementsByTagName("li");
        console.log(allLi);
        for(var i=0;i<allLi.length;i++)
        {
            var sLi = allLi[i];
            sLi.index = i+1;
            sLi.onmouseover = function () {

                console.log(this.index);

                box.style.background =  'url("'+ this.index +'.jpg") ,no-repeat ';

            }
        }



        //绑定事件

    }
</script>
</body>
</html>